<template>
    <div class="app-container">
        <el-table :data="data" style="width: 100%" border>
            <!--序号-->
            <el-table-column prop="data" label="序号" width="80" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + (currentPage - 1) * eachPage + 1 }}</span>
                </template>
            </el-table-column>

            <!--头像-->
            <el-table-column prop="title" label="头像（点击预览）" width="180" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 30px;" :src="scope.row.avatar" :preview-src-list="srcList" fit="contain">
                    </el-image>
                </template>
            </el-table-column>
            <!--昵称-->
            <el-table-column prop="nickname" label="昵称" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <template v-if="mode === 'pinglun'">
                <!--评论文章-->
                <el-table-column prop="content" align="center" label="评论文章">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.blog.title }}</span>
                    </template>
                </el-table-column>
            </template>
            <!--评论内容-->
            <el-table-column prop="content" align="center" label="评论内容">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <!--评论日期-->
            <el-table-column prop="createDate" align="center" label="创建日期">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ formatTimestamp(scope.row.createDate) }}</span>
                </template>
            </el-table-column>
            <!--操作【删除】-->
            <el-table-column prop="description" width="80" label="操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="Delete" placement="top" :hide-after=1200>
                        <el-button type="danger" icon="el-icon-delete" size="mini" circle
                            @click.prevent="delete_One_Blog_Handle(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>

        </el-table>

        <!--分页按钮-->
        <el-pagination background :page-sizes="[1, 2, 5, 10, 15, 20]" :page-size="eachPage"
            layout="prev, pager, next,total, ->,sizes, jumper" :current-page.sync="pageCurrentPage" :total="count"
            style="margin-top:20px;" @size-change="sizeChange_Handle" @current-change="currentChange_Handle"
            @prev-click="prevClick_Handle" @next-click="nextClick_Handle">
        </el-pagination>
    </div>
</template>

<script>
import * as PagingPingLun_API from "@/api/pinglun.js"
import * as message_API from "@/api/message.js"
import { URL_CONFIG } from "@/urlConfig"
import { formatTimestamp } from "@/utils/loos" // 转换时间
export default {
    data() {
        return {
            eachPage: 5, // 【每页显示多少条】
            pageCurrentPage: 1,//【切换条数后，默认回第一页】
            currentPage: 1,//当前页码
            totalPage: 0,//【总页数，一共可以点击多少页 的意思】
            count: 0,//【总数据有多少条】
            srcList: [],//预览图【要传数组】
            data: [],//初始数据
        }
    },
    props: ['mode'],
    created() {
        this.fetchData()
    },
    methods: {
        formatTimestamp, //把时间转换 方法配置
        // 获取评论
        async fetchData() {
            // this.data = [];
            if (this.mode === 'message') {
                const { data } = await message_API.getMessage(this.currentPage, this.eachPage)
                console.log(data, data.rows, '拿message的评论');
                this.data = data.rows
                this.count = data.total
                for (const item of this.data) {
                    // item.avatar2 = URL_CONFIG + item.avatar
                    this.srcList.push(item.avatar)
                    // console.log(this.data, '::this.data');
                }
            } else {
                const { data } = await PagingPingLun_API.getPagingPingLun(this.currentPage, this.eachPage)
                console.log(data, data.rows, '拿评论管理的评论');
                this.data = data.rows
                this.count = data.total
                for (const item of this.data) {
                    // item.avatar2 = URL_CONFIG + item.avatar
                    this.srcList.push(item.avatar)
                    // console.log(this.data, '::this.data');
                }
            }


            // 还需要算总 可点击页数
            this.totalPage = Math.ceil(this.count / this.eachPage) //【总条数/每页显示多少=还剩多少能点击的页码】
            console.log(this.currentPage, '当前还剩《', this.totalPage, '》可以点击的页码');

            if (this.currentPage > this.totalPage) {
                this.currentPage = parseInt(this.totalPage)
                this.fetchData()
            }
        },

        // 页码条数变化触发【会自动拿page-sizes里面定义的数字】
        sizeChange_Handle(page) {
            console.log(page, '页码条数变化触发-=-页码条数变化触发');

            this.eachPage = page
            this.pageCurrentPage = 1
            this.currentPage = 1
            this.fetchData()
        },
        // 当前页面改变触发
        currentChange_Handle(page) {
            console.log(page, '当前页面改变触发===当前页面改变触发===当前页面改变触发');

            this.currentPage = page
            this.fetchData()
            // this.pageCurrentPage = page
        },
        // 点击上一页触发
        prevClick_Handle() {
            this.currentPage -= 1
            this.fetchData()
        },
        // 点击下一页触发
        nextClick_Handle() {
            this.currentPage += 1
            this.fetchData()
        },
        // 【删除】
        delete_One_Blog_Handle(data) {
            console.log('删除', data.id);
            this.$confirm(`是否删除【${data.nickname}】用户的评论, 是否继续?`, '删除用户评论操作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await PagingPingLun_API.deletePingLun(data.id)
                this.fetchData()
                this.$message({
                    type: 'success',
                    message: `删除【${data.nickname}】用户评论成功!`
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
}
</script>

<style lang="less" scoped></style>
